<template>
    <div class="app-container">
        <el-form :model="queryParams" class="frominfo" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
            <div class="from-item">
                <el-form-item label="微信名称" prop="groupUserName">
                  <el-input v-model="queryParams.groupUserName" @keyup.enter.native="handleQuery" placeholder="请输入微信名称" clearable/>
                </el-form-item>
                <el-form-item label="微信ID" prop="wcId">
                  <el-input v-model="queryParams.wcId" @keyup.enter.native="handleQuery" placeholder="请输入微信ID" clearable/>
                </el-form-item>
                <el-form-item label="电话号码" prop="wcUserPhone">
                  <el-input v-model="queryParams.wcUserPhone" @keyup.enter.native="handleQuery" placeholder="请输入电话号码" clearable/>
                </el-form-item>
            </div>
            <div class="from-Btn">
              <el-form-item>
                  <el-button class="blue-button" type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
              </el-form-item>
              <el-form-item>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
              </el-form-item>
            </div>
      </el-form>
  
      <el-row :gutter="10" class="mb8" style="display: flex;align-items: center;">
        <el-col :span="1.5">
          <el-button class="blue-button" plain icon="el-icon-folder-add" size="mini"  @click="handleAdd" v-hasPermi="['arbit:wcgroupsuser:edit']">批量添加</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button class="blue-button" plain icon="el-icon-upload" size="mini"  @click="handleImport">选择文件</el-button>
        </el-col>
      </el-row>
  
      <el-table v-if="searchInfo!=null" ref="multipleTable" v-loading="loading" :header-cell-style="{ background: '#fcfcfd', color: '#000' }" :border="false" :data="wcGroupsUserList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" :show-overflow-tooltip="true"/>
        <el-table-column label="序号" type="index" width="50" align="center">
          <template slot-scope="scope">
            <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
          
        <el-table-column label="微信ID" prop="wcId" align="center" :show-overflow-tooltip="true"/>
        <el-table-column label="微信名称" prop="groupUserName" align="center" :show-overflow-tooltip="true"/>
        <el-table-column label="电话号码" prop="wcUserPhone" align="center" :show-overflow-tooltip="true"/>
        <el-table-column label="" align="center" width="120" class-name="small-padding fixed-width">
            <template slot="header">
              <span>微信号操作</span>
              <el-tooltip class="item" effect="dark" content="点击添加好友" placement="top">
                <i class="el-icon-warning" style="color:#818e96;"></i>
              </el-tooltip>
            </template>
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleUpdate(scope.row)">加好友</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-if="searchInfo!=null" v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
      <el-empty v-if="searchInfo==null" style="margin-top: 20px;background-color: #fff;" description="未添加任何数据">
          <span style="font-size: 12px;color: #818e96;">(请先导入数据文件)</span>
      </el-empty>

      <!-- 添加或修改微信群成员对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="550px" append-to-body>
        <div class="dia-box">
            <span v-if="!common" style="font-size: 14px;margin-right: 10px;line-height: 40px;">请选择营销助手</span>
            <div class="dia-box-search" v-if="!common">
               <div class="select-all"><i class="el-icon-arrow-right" style="margin-right: 10px;"></i><el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox></div>
               <div style="width: 260px;">
                <el-input placeholder="请输入微信名称" v-model="query.wcName" class="input-with-select">
                 <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                </el-input>
               </div>
            </div>
            <span class="box-txt" style="color: red;" v-if="show">置灰助手不可选，添加好友超过最高限制</span>
            <div class="dia-box-lable" v-if="show">
              <div v-for="item,index in AssistList" :key="index" class="lable-box" @click="item.canCreateTask?setIdx(index,item.remark):goTs()" :style="item.canCreateTask?item.remark?'background-color: #0078fb;border-color: #0078fb;color: #fff;':'':'background-color: #dcdcdc;'">{{ item.wcName }}</div>
            </div>
            <div class="dia-box-lable" v-if="!common">
               <span style="font-size: 14px;color: #9aa5aa;">已选：</span>
               <div v-for="item,index in selectList" :key="index" class="lable-box">{{ item.wcName }}<i @click="delIdx(index,item.wcId)" class="el-icon-close" style="margin-left: 10px;"></i></div>
               <span v-if="(selectList==''||selectList==null)">请选择选择</span>
            </div>
          <div class="dia-box-time">
            <div class="box-setups">
                <span style="margin-right: 10px;"><span style="color: #ff6d6f;">*</span>申请好友用语</span>
                <el-autocomplete
                  type="textarea" 
                  rows="4" 
                  :maxlength="460"
                  class="my-autocomplete"
                  v-model="addGroupFriend.applyContent"
                  ref="autocomplete"
                  :fetch-suggestions="querySearch"
                  placeholder="请输入或选择内容"
                  @select="handleSelect">

                  <template slot-scope="{ item }">
                    <div class="name">{{ item.label }}</div>
                  </template>
                </el-autocomplete>
            </div>
            <div style="display: flex;align-items: center;margin-bottom: 20px;">
                <span style="margin-right: 10px;"><span style="color: #ff6d6f;">*</span>执行时间</span>
                <el-radio-group v-model="addGroupFriend.wcTimedTasks.executionType">
                  <el-radio :label="1">立即执行</el-radio>
                  <el-radio :label="2">定时执行</el-radio>
                </el-radio-group>
            </div>
            <div style="height: 10px; line-height: 10px; font-size: 12px;color: rgb(255, 109, 111);margin-bottom: 10px;">任务只在早上7点到晚上9点之间执行</div>
            <div style="display: flex;align-items: center;margin-bottom: 20px;" v-if="addGroupFriend.wcTimedTasks.executionType==2">
                <span>定时：</span>
                <el-date-picker
                  v-model="addGroupFriend.wcTimedTasks.satartDate"
                  type="datetime"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期时间">
                </el-date-picker>
            </div>
            <!-- <div style="display: flex;align-items: center;">
                <span>单次间隔时间：</span>
                <el-select v-model="addGroupFriend.wcTimedTasks.intervalTime" placeholder="请选择" clearable>
                    <el-option v-for="dict in dict.type.sys_time_type" :key="dict.value" :label="dict.label+'ms'" :value="dict.label"/>
                </el-select>
            </div> -->
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
      <!-- 用户导入对话框 -->
      <el-dialog title="导入文件" :visible.sync="opens" width="400px" append-to-body>
        <el-upload
          ref="upload"
          :limit="1"
          accept=".xlsx, .xls"
          :headers="upload.headers"
          :action="upload.url"
          :disabled="upload.isUploading"
          :on-progress="handleFileUploadProgress"
          :on-success="handleFileSuccess"
          :auto-upload="false"
          drag
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip text-center" slot="tip">
            <span>仅允许导入xls、xlsx格式文件。</span>
            <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="handleExport">下载模板</el-link>
          </div>
        </el-upload>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" style="margin-right: 40px;" @click="submitFileForm">确 定</el-button>
          <el-button @click="opens = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  
  import moment from "moment";
  import { getToken } from "@/utils/auth";
  import request from '@/utils/request'
  export default {
    name: "WcGroupsUser",
    dicts: ['sys_time_type','sys_cycle_type'],
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        data:null,
        searchInfo:null,
        // 微信群成员表格数据
        wcGroupsUserList:null,
        // 弹出层标题
        title: "新增任务",
        // 是否显示弹出层
        open: false,
        opens:false,
        query: {
          pageNum: 1,
          pageSize: 999,
          wcId: null,
          deptId:null,
          wcName: null,
          wcNumber:null,
          wcPhone:null,
        },
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          wcId: null,
          groupUserName: null,
          wcUserPhone: null,
        },
        show:false,
        radio:0,
        // 用户导入参数
        upload: {
          // 是否禁用上传
          isUploading: false,
          // 是否更新已经存在的用户数据
          updateSupport: 0,
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
          // 上传的地址
          url:process.env.VUE_APP_BASE_API + "/arbit/wctimedTasks/importData", // 上传文件
        },
        checkAll:false,
        pageList:[],
        AssistList:[],
        selectList:[],
        chatTime:[],
        addGroupFriend:{
          "wcUserInfoList":[],
          "wcGroupsUserList":[],
          "wcTimedTasks": {
            "taskType": 0, //任务类型 (0:添加好友任务 1：定时点赞  2:群发任务)
            "executionType": 1, //执行类型不能为空
            "createTime":null,
            "executeTime": null, //执行时间
            "intervalTime": null, //执行间隔时间
            "satartDate": null //开始执行时间//定时执行的时候传该值,该值和executeTime保持一致
          },
          "applyContent":null,//申请好友用语
        },
        common:false,
        addType:true,
      };
    },
    created() {
    },
    mounted() {
      if(this.$route.query!=''&&this.$route.query!=undefined&&this.$route.query!=null){
        if(this.$route.query.info!=''&&this.$route.query.info!=undefined&&this.$route.query.info!=null){
          this.addGroupFriend=JSON.parse(this.$route.query.info)
          this.selectList=this.addGroupFriend.wcUserInfoList
        }
      }
      if(this.$store.state.user.roles.includes("common")){
         this.common=true
         this.show=false
         this.addGroupFriend.wcUserInfoList=[{wcId:this.$store.state.user.wxid,wcName:this.$store.state.user.wcname}]
         this.selectList=this.addGroupFriend.wcUserInfoList
      }
      if(this.selectList==''||this.selectList==null||this.selectList==undefined){
        this.addGroupFriend.wcUserInfoList=[{wcId:this.$store.state.user.wxid,wcName:this.$store.state.user.wcname}]
        this.selectList=this.addGroupFriend.wcUserInfoList
      }
      this.addGroupFriend.wcGroupsUserList=[]
      this.getPage()
    },
    methods: {
      /** 查询微信群成员列表 */
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset()
      },
      // 表单重置
      reset() {
        this.show=false
        this.checkAll=false
        this.AssistList=[]
        this.ids=[]
        this.$refs.multipleTable.clearSelection();
        this.addGroupFriend={
          "wcUserInfoList":this.selectList,
          "wcGroupsUserList":[],
          "wcTimedTasks": {
            "taskType": 0, //任务类型 (0:添加好友任务 1：定时点赞  2:群发任务)
            "executionType": 1, //执行类型不能为空
            "createTime":null,
            "executeTime": null, //执行时间
            "intervalTime": null, //执行间隔时间
            "satartDate": null //开始执行时间//定时执行的时候传该值,该值和executeTime保持一致
          },
          "applyContent":null,//申请好友用语
        }
      },
      handleImport() {
        this.opens = true;
      },
      getList(){
        const start = (this.queryParams.pageNum - 1) * this.queryParams.pageSize;
        const end = start + this.queryParams.pageSize;
        this.wcGroupsUserList=this.searchInfo.slice(start, end);
        this.loading=false
      },
      getPage(){
        page({pageNum: 1,pageSize: 999,termType:1}).then(res => {
          //console.log(res)
          if (res['success']) {
            const dt = res['data'];
            //this.total = dt['total'];
            this.pageList =dt['records'].map(key => {
              return {label:key.content,value:key.termId}
            })
            console.log(this.pageList)
          }
        });
      },
      querySearch(queryString, cb) {
        var restaurants = this.pageList;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.label.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      goTs(){

      },
      handleSelect(item) {
        this.addGroupFriend.applyContent=item.label
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.loading=true
        this.searchInfo=this.data
        if(this.queryParams.groupUserName!=null&&this.queryParams.groupUserName!=''){
            this.searchInfo= this.searchInfo.filter(item => {
              // 这里可以根据需要增加更多的过滤条件
              return item.groupUserName.includes(this.queryParams.groupUserName);
            });
        }
        if(this.queryParams.wcId!=null&&this.queryParams.wcId!=''){
            this.searchInfo= this.searchInfo.filter(item => {
              // 这里可以根据需要增加更多的过滤条件
              return item.wcId.includes(this.queryParams.wcId);
            });
        }
        if(this.queryParams.wcUserPhone!=null&&this.queryParams.wcUserPhone!=''){
            this.searchInfo= this.searchInfo.filter(item => {
              // 这里可以根据需要增加更多的过滤条件
              return item.wcUserPhone.includes(this.queryParams.wcUserPhone);
            });
        }
        this.total=this.searchInfo.length
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        if(this.data!=null&&this.data!=''){
          this.queryParams={
            pageNum: 1,
            pageSize: 10,
            wcId: null,
            groupUserName: null,
            wcUserPhone: null,
          }
          this.handleQuery()
        }else{
          this.$message({
              message: '请先导入文件',
              type: 'warning'
          });
        }
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(row => {
              const itemArr={
                "groupUserId": row.wcId, 
                "groupUserName": row.groupUserName, 
                "wcUserPhone":row.wcUserPhone,
              }
            return itemArr
        })
        this.addGroupFriend.wcGroupsUserList=this.ids
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.getAssist().then((res)=>{
          if(this.addType){
            if(this.ids!=''&&this.ids!=null){
              this.open = true;
            }else{
              this.$message({
                  message: '请选择好友！',
                  type: 'warning'
              });
            }
          }else{
            this.$message({
                message: '添加好友已经超过最高限制！',
                type: 'warning'
            });
          }
        })
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        // console.log(row)
        this.getAssist().then((res)=>{
          if(this.addType){
            this.open = true;
            this.addGroupFriend.wcGroupsUserList=[{
                "groupUserName": row.groupUserName, 
                "groupUserId": row.wcId, 
                "wcUserPhone": row.wcUserPhone, 
            }]
          }else{
            this.$message({
                message: '添加好友已经超过最高限制！',
                type: 'warning'
            });
          }
        })
      },
      /** 提交按钮 */
      submitForm() {
        var arr=this.addGroupFriend
        arr.wcUserInfoList=this.selectList
        //console.log(arr)
        if(arr.wcUserInfoList.length>0){
            var currentTime=moment().format('YYYY-MM-DD HH:mm:ss');
            arr.wcTimedTasks.createTime=currentTime
            if(arr.wcTimedTasks.executionType==1){
              arr.wcTimedTasks.executeTime=currentTime
              arr.wcTimedTasks.satartDate=currentTime
            }else{
              arr.wcTimedTasks.executeTime=arr.wcTimedTasks.satartDate
               if(arr.wcTimedTasks.satartDate==''||arr.wcTimedTasks.satartDate==null){
                  this.$message({
                      message: '请选择定时时间！',
                      type: 'warning'
                  });
                  return
               }
            }

            if(arr.applyContent==''||arr.applyContent==null){
                  this.$message({
                      message: '请输入或选择申请好友用语！',
                      type: 'warning'
                  });
                  return
            }
            // if(arr.wcTimedTasks.intervalTime==''||arr.wcTimedTasks.intervalTime==null){
            //       this.$message({
            //           message: '请选择单次间隔！',
            //           type: 'warning'
            //       });
            //       return
            // }
            addGroupUser({
                "wcGroupsUserList": arr.wcGroupsUserList,
                "wcUserInfoList": arr.wcUserInfoList,
                "executionType": arr.wcTimedTasks.executionType,
                "wcTimedTasks": {
                    "createTime": arr.wcTimedTasks.createTime,
                    "executionType": arr.wcTimedTasks.executionType,
                    "executeTime": arr.wcTimedTasks.executeTime,
                    "intervalTime": arr.wcTimedTasks.intervalTime,
                    "satartDate":arr.wcTimedTasks.satartDate,
                    "taskType": 0,
                },
                "applyContent":arr.applyContent
            }).then(res => {
              //console.log(res)
              this.open = false;
              this.$modal.msgSuccess("申请成功");
              if(res.code==200){
                this.reset()
              }
            })
        }else{
          this.$message({
              message: '请选择助手！',
              type: 'warning'
          });
        }
        
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('arbit/wctimedTasks/exportTemplateExcel', {
          ...this.queryParams
        }, `moban_${new Date().getTime()}.xlsx`)
      },
      // 文件上传中处理
      handleFileUploadProgress(event, file, fileList) {
        this.upload.isUploading = true;
      },
      // 文件上传成功处理
      handleFileSuccess(response, file, fileList) {
        //console.log(response)
        this.opens = false;
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();
        this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
        if(response.msg=="操作成功"){
          this.loading=false
          this.total=response.data.length
          this.data=response.data
          this.searchInfo=response.data
          this.getList()
        }
        
      },
      // 提交上传文件
      submitFileForm() {
        this.$refs.upload.submit();
      },
      search(){
      // if(this.query.wcName!=null&&this.query.wcName!=''){
      //   this.show=true
      //   this.getAssist()
      // }else{
      //   this.$message({
      //       message: '请先输入要搜索的内容！',
      //       type: 'warning'
      //   });
      // }
      this.show=true
      this.getAssist()
    },
    async getAssist(){
      await listWcAssist(this.query).then(res => {
        if (res['success']) {
          const dt = res['data'];
          this.totals = dt['total'];
          dt['records'].forEach(element => {
            element.remark=false
          }); 
          this.AssistList = dt['records'];
          if(this.$store.state.user.roles.includes("common")){
            this.addType=dt['records'][0].canCreateTask
          }
          if(this.selectList!=''&&this.selectList!=null){
            this.AssistList.forEach(item=>{
              this.selectList.forEach((arr,index)=>{
                if(item.wcId==arr.wcId&&item.canCreateTask){
                  item.remark=true
                }else if(item.wcId==arr.wcId&&!item.canCreateTask){
                  this.selectList.splice(index,1)
                }
              })
            })
            this.addGroupFriend.wcUserInfoList=this.selectList
            //console.log(this.selectList)
          }
        }
      });
    },
    handleCheckAllChange(selection) {
      if(this.AssistList!=null&&this.AssistList!=''){
        this.checkAll=selection
        if(selection){
            this.selectList=this.AssistList.map(item => {
			  	  	const newItem = { "assistId": item.assistId, "wcId":item.wcId,"wcName": item.wcName, "wcNumber": item.wcNumber,"wcImg": item.wcImg, "wcPhone": item.wcPhone,"region": item.region, "loginTime": item.loginTime,"loginState": 1, "olState": 1,"remark": "" }
			  	  	return newItem
			  	  })
            this.AssistList.forEach(element => {
              element.remark=true
            }); 
        }else{
          this.selectList=[]
          this.AssistList.forEach(element => {
              element.remark=false
          }); 
        }
      }else{
        this.checkAll=false
        this.$message({
            message: '请先搜索助手！',
            type: 'warning'
        });
      }
      
      // this.ids = selection.map(item => item.id)
      // this.single = selection.length!==1
      // this.multiple = !selection.length
    },
    setIdx(idx,type){
      if(!type){
        this.AssistList[idx].remark=true
        var item=this.AssistList[idx]
        //console.log(this.selectList)
        this.selectList.push({ "assistId": item.assistId, "wcId":item.wcId,"wcName": item.wcName, "wcNumber": item.wcNumber,"wcImg": item.wcImg, "wcPhone": item.wcPhone,"region": item.region, "loginTime": item.loginTime,"loginState": 1, "olState": 1,"remark": "" })
      }
    },
    delIdx(idx,id){
      this.checkAll=false
      this.selectList.splice(idx,1)
      this.AssistList.forEach(element => {
        if(element.wcId==id){
          element.remark=false
        }
      }); 
    },
    }
  };
  
  /** js请求 调用 */
  
   // 查询助手信息列表
   export function listWcAssist(query) {
    return request({
      url: '/arbit/wcuser_info/page',
      method: 'get',
      params: query
    })
  }
  
   // 群好友添加
   export function addGroupUser(query) {
    return request({
      url: '/arbit/wctimedTasks/addGroupFriends',
      method: 'POST',
      data: query
    })
  }
  // 查询助手招呼语设置列表
  export function page(query) {
    return request({
      url: '/wcUserTerms/page',
      method: 'get',
      params: query
    })
  }
  </script>
  <style lang="scss">
  .my-autocomplete {
    width: 370px;
    li {
      line-height: normal;
      padding: 7px;
  
      .name {
       white-space: normal;
       overflow: auto;
       line-height: 30px;
      }
      .addr {
        font-size: 12px;
        color: #b4b4b4;
      }
  
      .highlighted .addr {
        color: #ddd;
      }
    }
  }
</style>
  <style lang="scss">
    .app-container{
      background-color: #f6f9fb;
    }
    .frominfo{
      display: flex;background-color: #fff;padding: 10px;padding-bottom: 0; margin-bottom: 20px;
      .from-item{
        display: flex;flex-wrap: wrap;width: 80%;
      }
      .from-Btn{
        display: flex;flex-direction: column;align-items: center;justify-content: center;width: 20%;
      }
    }
    .mb8{
      margin-bottom: 20px;
    }
    .blue-button {
      color: #fff;
      background-color: #0078fb;
      border-color: #0078fb;
    }
    .dialog-footer{
      display: flex;
      justify-content: center;
    }
    .upload-demo{
        display: flex;
        flex-direction: row;
    }
    .box-txt{
        font-size: 14px;margin-right: 10px;line-height: 40px;
    }
    .dia-box{
      margin-top: -20px;
      padding: 0 20px 20px 20px;
      display: flex;
      flex-direction: column;
        .dia-box-search{
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          .select-all{
            border:1px solid #DCDFE6;height: 36px;line-height: 36px;padding:0 10px;border-radius: 4px;
          }
        }
        .dia-box-time{
            display: flex;
            flex-direction: column;
            .box-setups{
              display: flex;margin-bottom: 20px;
            }
        }
        .dia-box-lable{
          width:90%;
          border-radius: 5px;
          border:1px solid #eee;
          min-height: 100px;
          display: flex;
          flex-wrap: wrap;
          padding: 10px;
          margin-bottom: 20px;
          .lable-box{
            padding: 0 5px;
            height: 20px;
            line-height: 20px;
            margin-right: 10px;
            border: 1px solid #dcdcdc;
            background-color: #ebf4ff;
            font-size: 12px;
            border-radius: 3px;
          }
          .select{
            color: #fff;
            background-color: #4095e5;
          }
        }
        .dialog-footer{
          display: flex;
          justify-content: center;
        }
    }
  </style>